<template>
  <uni-nav-bar
    v-if="isWechat()"
    :border="false"
    :title="webTitle"
    left-icon="left"
    fixed
    shadow
    status-bar
    @click-left="router.back"
  />
  <view class="web-contain p-4" :style="{ minHeight: 'calc(100vh - 44px - ' + statusBarH + 'px)' }">
    <uv-parse :content="content" v-if="key != 'rental_propagate' && key != 'buy'"></uv-parse>
    <view class="web-contain-image" v-else>
      <view class="web-image__container" :style="{ height: `${imageHeight}px` }">
        <image :src="content" :style="imageStyle" @load="onImageLoad"></image>
      </view>
      <view class="web-contain-image-btn" v-if="key != 'buy'">
        <view @click="gotoKf">{{ t('LKey_onlineService') }}</view>
      </view>
      <view class="web-contain-image-buybtn" v-else>
        <view class="web-contain-image-buybtn-view" @click="router.to(RouteMap.intentionIndex)">
          <view class="web-contain-image-buybtn-view-top">
            {{ t('LKey_projectConsulting') }}
          </view>
          <view class="web-contain-image-buybtn-view-bottom">
            {{ t('LKey_property1V1Service') }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { RouteMap, useRouter } from '../../router';
import { onLoad } from '@dcloudio/uni-app';
import { getConfig } from '../../api/home';
import { getLevelRule } from '../../api/user';
import { useAuthStore } from '../../store/auth';
import { useImageLoad } from './useImageLoad';
import { useLocale } from '@/locale/locale';
import { isWechat } from '@/utils/platform';

const { t } = useLocale();
const router = useRouter();
const statusBarH = ref(0);
const key = ref('');
const webTitle = ref('');
const content = ref('');
const authStore = useAuthStore();

const { imageHeight, imageStyle, onImageLoad } = useImageLoad();

function gotoKf() {
  if (authStore.isLoggedIn) {
    uni.navigateTo({
      url: '/pages/cs/cs'
    });
  } else {
    navigateToLogin();
  }
}

function navigateToLogin() {
  if (!authStore.isLoggedIn) {
    uni.navigateTo({
      url: '/pages/auth/login'
    });
  }
}

async function getAppConfig(key: string) {
  const res = await getConfig();
  res.data.config.map((item: any) => {
    if (item.key == key) {
      webTitle.value = item.name;
      content.value = item.value;
    }
  });
}

async function getLevelRuleConf() {
  const res = await getLevelRule();
  webTitle.value = t('LAKey_privileges');
  content.value = res.data.levelRule;
}

onLoad(async (options) => {
  key.value = options!.key;
  uni.getSystemInfo({
    success: (res) => {
      statusBarH.value = res.statusBarHeight || 0;
    }
  });
  if (
    options!.key == 'useragreement' ||
    options!.key == 'rental_propagate' ||
    options!.key == 'buy'
  ) {
    getAppConfig(options!.key);
  } else if (options!.key == 'memberlevel') {
    getLevelRuleConf();
  }
});
</script>

<style scoped lang="scss">
.web-contain {
  width: 100%;
  background: #fff;
  font-size: 24rpx;
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  &-image {
    padding-bottom: 120rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 120rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
    &-btn {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #ffffff;
      padding-top: 8rpx;
      padding-bottom: 8rpx;
      padding-bottom: calc(constant(safe-area-inset-bottom) + 8rpx);
      padding-bottom: calc(env(safe-area-inset-bottom) + 8rpx);
      view {
        margin: 0 32rpx;
        height: 76rpx;
        line-height: 76rpx;
        border-radius: 76rpx;
        background: #269c74;
        font-weight: 500;
        font-size: 30rpx;
        color: #ffffff;
        text-align: center;
      }
    }
    &-buybtn {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #ffffff;
      padding-top: 8rpx;
      padding-bottom: 8rpx;
      padding-bottom: calc(constant(safe-area-inset-bottom) + 8rpx);
      padding-bottom: calc(env(safe-area-inset-bottom) + 8rpx);
      &-view {
        margin: 0 32rpx;
        height: 88rpx;
        line-height: 88rpx;
        border-radius: 88rpx;
        background: #3269fb;
        font-weight: 500;
        font-size: 30rpx;
        color: #ffffff;
        text-align: center;
        &-top {
          padding-top: 6rpx;
          font-weight: 500;
          font-size: 30rpx;
          line-height: 42rpx;
          text-align: center;
          font-style: normal;
        }
        &-bottom {
          font-weight: 400;
          font-size: 24rpx;
          line-height: 34rpx;
          text-align: center;
        }
      }
    }
  }
}

.web-image__container {
  position: relative;
  width: 100%;
}

.web-image__container image {
  transition: opacity 0.3s ease;
}
</style>
